import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet, Dimensions, Modal, Text, Image,SafeAreaView} from "react-native";
import Separator from "../Separator";

const {width, height} = Dimensions.get('window');

type Props = {
    title:string,
    onPress:Function,
    closeModal:Function,
    confirmTitle:string,
    show:boolean,
}

export default class CommonAlertDialog extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    close() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }



    pay() {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        this.props.onPress();
    }




    render() {

        return (
            <View style={{flex: 1}}>
                <Modal
                    transparent={true}
                    visible={this.state.isVisible}
                    animationType={'fade'}
                    >
                    <TouchableOpacity style={styles.container} activeOpacity={1}>
                        <View style={{backgroundColor:"white",borderRadius:12,width:312,}}>
                            <Text style={{lineHeight:22,color:'#333333',fontWeight:'200',fontSize:15,width:312-20,marginLeft:10,marginTop:37,marginBottom:39,textAlign:'center'}}>{this.props.title}</Text>
                            <View style={{width:312,height:1,backgroundColor:'#D8D9D9'}}/>
                            <View style={{flexDirection:'row',}}>
                                <TouchableOpacity onPress={()=>{this.close()}} style={{justifyContent:'center',alignItems:'center',width:312/2}}>
                                    <Text style={{color:'#333333',fontSize:15,fontWeight:'200'}}>取消</Text>
                                </TouchableOpacity>
                                <View style={{width:1,height:47,backgroundColor:'#D8D9D9'}}/>
                                <TouchableOpacity onPress={()=>{this.pay()}} style={{justifyContent:'center',alignItems:'center',width:312/2}}>
                                    <Text style={{color:'#DB3843',fontSize:15,fontWeight:'200'}}>{this.props.confirmTitle}</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent:"center",
        alignItems:'center'
    },

});